<template>
  <div class="app-container">
    <el-card class="test-controls">
      <div slot="header" class="clearfix">
        <span>动态详情渲染组件测试</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="选择测试数据类型:">
            <el-select v-model="selectedTestType" @change="handleTestTypeChange" style="width: 100%">
              <el-option
                v-for="type in testTypes"
                :key="type.key"
                :label="type.name"
                :value="type.key"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="每行字段数:">
            <el-input-number v-model="fieldsPerRow" :min="1" :max="6" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="启用分组排序:">
            <el-switch v-model="enableGrouping" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="数据类型:">
            <el-select v-model="dataType" style="width: 100%">
              <el-option label="自动检测" value="auto" />
              <el-option label="螺丝拧紧" value="screw" />
              <el-option label="电阻测试" value="resistance" />
              <el-option label="上料" value="load" />
              <el-option label="涂胶" value="glue" />
              <el-option label="清洗" value="clean" />
              <el-option label="相机检测" value="camera" />
              <el-option label="默认" value="default" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="generateRandomData">生成随机数据</el-button>
          <el-button type="success" @click="showDetectionInfo">显示检测信息</el-button>
          <el-button type="info" @click="showJsonData">显示JSON数据</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 检测信息显示 -->
    <el-card v-if="detectionInfo" class="detection-info">
      <div slot="header" class="clearfix">
        <span>数据类型检测信息</span>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="检测到的类型">
          <el-tag :type="getTypeTagType(detectionInfo.type)">{{ detectionInfo.name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="匹配分数">
          <el-progress :percentage="Math.round(detectionInfo.score * 100)" :status="getScoreStatus(detectionInfo.score)" />
        </el-descriptions-item>
        <el-descriptions-item label="匹配字段">
          <el-tag v-for="field in detectionInfo.matchedFields" :key="field" size="mini" style="margin-right: 5px;">
            {{ field }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="可能的Java类">
          <el-tag v-for="cls in detectionInfo.possibleClasses" :key="cls" type="info" size="mini" style="margin-right: 5px;">
            {{ cls }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 动态详情渲染 -->
    <el-card class="detail-renderer">
      <div slot="header" class="clearfix">
        <span>动态详情渲染结果</span>
      </div>

      <DynamicDetailRenderer
        :data="currentTestData"
        :data-type="dataType"
        :fields-per-row="fieldsPerRow"
        :enable-grouping="enableGrouping"
      />
    </el-card>

    <!-- JSON数据显示对话框 -->
    <el-dialog title="JSON数据" :visible.sync="jsonDialogVisible" width="60%">
      <el-input
        type="textarea"
        :rows="20"
        v-model="jsonDataString"
        readonly
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="copyJsonData">复制数据</el-button>
        <el-button type="primary" @click="jsonDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DynamicDetailRenderer from './components/DynamicDetailRenderer.vue'
import { detectDataType, getDataTypeInfo, getPossibleJavaClasses } from './components/dataTypeDetector.js'
import { testDataMap, getTestDataTypes, generateRandomTestData, getTestDataAsJson } from './components/testData.js'

export default {
  name: 'DynamicDetailTest',
  components: {
    DynamicDetailRenderer
  },
  data() {
    return {
      selectedTestType: 'screw',
      dataType: 'auto',
      fieldsPerRow: 3,
      enableGrouping: true,
      currentTestData: {},
      detectionInfo: null,
      jsonDialogVisible: false,
      jsonDataString: '',
      testTypes: getTestDataTypes()
    }
  },
  created() {
    this.handleTestTypeChange()
  },
  methods: {
    handleTestTypeChange() {
      this.currentTestData = testDataMap[this.selectedTestType]?.data || {}
      this.updateDetectionInfo()
    },

    generateRandomData() {
      this.currentTestData = generateRandomTestData(this.selectedTestType)
      this.updateDetectionInfo()
    },

    updateDetectionInfo() {
      this.detectionInfo = getDataTypeInfo(this.currentTestData)
    },

    showDetectionInfo() {
      this.updateDetectionInfo()
      this.$message.success('检测信息已更新')
    },

    showJsonData() {
      this.jsonDataString = JSON.stringify(this.currentTestData, null, 2)
      this.jsonDialogVisible = true
    },

    copyJsonData() {
      navigator.clipboard.writeText(this.jsonDataString).then(() => {
        this.$message.success('JSON数据已复制到剪贴板')
      }).catch(() => {
        this.$message.error('复制失败')
      })
    },

    getTypeTagType(type) {
      const typeMap = {
        screw: 'primary',
        resistance: 'success',
        load: 'info',
        glue: 'warning',
        clean: 'danger',
        camera: '',
        default: 'info'
      }
      return typeMap[type] || 'info'
    },

    getScoreStatus(score) {
      if (score >= 0.8) return 'success'
      if (score >= 0.5) return 'warning'
      return 'exception'
    }
  }
}
</script>

<style scoped>
.test-controls {
  margin-bottom: 20px;
}

.detection-info {
  margin-bottom: 20px;
}

.detail-renderer {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
